<template>
    <div class="crossLevelSupervise">
      <van-row class="crossLevelSupervise-top">
        <van-col span="8">
          <van-button style="width:100%;"  @click="timePopup=true">时间筛选<i class="iconfont icon-xia"></i></van-button>
        </van-col>
        <van-col  span="8">
          <van-button style="width:100%;"  @click="sortShow=true">排序方式<i class="iconfont icon-xia"></i></van-button>
        </van-col>
        <van-col span="8">
          <van-button style="width:100%;"  @click="displayMode=true">显示方式<i class="iconfont icon-xia"></i></van-button>
        </van-col>
       <!-- <van-col span="6">
          <van-button style="width:100%;" size="small" @click="goodsShow=true">搜索商品</van-button>
        </van-col>-->
      </van-row>

      <div class="crossLevelSupervised-menu">
        <div style="width:33.33%;border-right:1px solid #ddd;">
          <p style="margin:0;">销售总数</p>
          <span :style="{color:color}">{{totalSales}}</span>
        </div>
        <div style="width:33.33%;border-right:1px solid #ddd;">
          <p style="margin:0;">销售总额</p>
          <span :style="{color:color}">￥{{totalSalesAmount}}</span>
        </div>
        <div style="width:33.33%;">
          <p style="margin:0;">当前库存</p>
          <span :style="{color:color}">{{currentStock}}</span>
        </div>
      </div>

      <!--列表-->
      <div class="crossLevelSupervise-content">
        <van-list
          v-model="loading"
          :finished="finished"
          :offset="offset"
          @load="getAllFn"
        >
          <div v-if="typeof goodsDP=='string'" style="color:#ddd;padding:20px 0;background: #fff!important;">{{goodsDP}}</div>
          <div v-else >

            <!--按店铺显示   -->
            <div v-if="displayModeRadioNext=='1'">
              <van-row  v-for="(item,index) in goodsDP" :key="index"  style="text-align: left;padding:5px 10px;margin:5px 0;background: #fff!important;border-radius:3px;">
                <van-col span="24">
                  <van-row>
                    <van-col span="24" style="padding:5px 0;">
                      {{item.store_area}}【{{item.store_name}}】
                    </van-col>
                    <van-col span="24" style="padding:5px 0;">
                      销售金额:<span :style="{color:color}">￥{{item.xs_money}}</span>
                    </van-col>
                    <van-col span="12" style="padding:5px 0;">
                      销售数量:<span :style="{color:color}">{{item.xs_num}}</span>
                    </van-col>
                    <van-col span="12" style="padding:5px 0;">
                      库存数量:<span :style="{color:color}">{{item.kucun}}</span>
                    </van-col>
                  </van-row>
                </van-col>
              </van-row>
            </div>


            <!--按商品显示  -->
            <div v-else-if="displayModeRadioNext=='2'">
              <van-row  v-for="(item,index) in goodsDP" :key="index" style="text-align: left;padding: 5px 0;margin:5px 0;background: #fff!important;border-radius:3px;">
                <van-col span="6" style="padding:3px 0;text-align: center">

                  <img v-if="item.imgStatus>0" class="cli-imgs"  style="" :src="memberDetails.imgaes+''+item.images" alt="">
                  <img v-else class="cli-imgs" src="../../images/noimg.jpg" alt="">
                </van-col>
                <van-col span="18">
                  <van-row>
                    <van-col span="24" style="padding:3px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color:#000;">
                      {{item.goodsName}}
                    </van-col>
                    <van-col span="24" style="padding:3px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                      商品规格: 【<span v-for="(v,h,i) in item.spec_data" :key="i">{{h}}:{{v}} </span>】
                    </van-col>
                    <van-col span="12" style="padding:3px 0;">
                      库存数量:<span :style="{color:color}">{{item.kucun}}</span>
                    </van-col>
                    <van-col span="12" style="padding:3px 0;" >
                      销售数量：<span :style="{color:color}">{{item.xs_num}}</span>
                    </van-col>

                    <van-col span="24" style="padding:3px 0;">
                      金额: <span :style="{color:color}">￥{{item.xs_money}}</span>
                    </van-col>
                  </van-row>
                </van-col>
              </van-row>
            </div>

            <!--按店铺+商品显示 v-else-->
            <div v-else>
              <van-row  v-for="(item,index) in goodsDP" :key="index" style="text-align: left;padding:5px 0;margin:5px 0;background: #fff!important;border-radius:3px;">
                <van-col span="24" style="padding:3px 10px;">
                  {{item.store_area}}【{{item.store_name}}】
                </van-col>

                <van-col span="6" style="padding:3px 0;text-align:center;">

                  <img v-if="item.imgStatus>0" class="cli-imgs" :src="memberDetails.imgaes+''+item.images" alt="">
                  <img v-else  class="cli-imgs" src="../../images/noimg.jpg" alt="">
                </van-col>
                <van-col span="18">
                  <van-row>
                    <van-col span="24" style="padding:3px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color:#000;">
                      {{item.goodsName}}
                    </van-col>
                    <van-col span="24" style="padding:3px 0;">
                      商品规格: 【<span v-for="(v,h,i) in item.spec_data" :key="i">{{h}}:{{v}} </span>】
                    </van-col>
                    <van-col span="12" style="padding:3px 0;">
                      库存数量:<span :style="{color:color}">{{item.kucun}}</span>
                    </van-col>
                    <van-col span="12" style="padding:3px 0;" >
                      销售数量：<span :style="{color:color}">{{item.xs_num}}</span>
                    </van-col>

                    <van-col span="24" style="padding:3px 0;">
                      金额: <span :style="{color:color}">￥{{item.xs_money}}</span>
                    </van-col>
                  </van-row>
                </van-col>
              </van-row>
            </div>

            <van-row :style="{display:noData}" class="noDatas">
              <van-col span="24">数据已加载完</van-col>
            </van-row>
          </div>
        </van-list>


      </div>

      <!--时间弹层-->
      <van-popup v-model="timePopup" @click-overlay="getCurrentDate=getCurrentDatePrev,getEndCurrentDate=getEndCurrentDatePrev" class="timeMask" >
        <van-cell-group>
          <van-cell title="开始时间" class="sTimeMask" is-link :value="getCurrentDate" @click="startPopupShow=true"/>
        </van-cell-group>
        <van-cell-group>
          <van-cell title="结束时间" class="sTimeMask" is-link :value="getEndCurrentDate" @click="endPopupShow=true"/>
        </van-cell-group>
        <!--按钮-->
        <van-row class="maskBtn" style="">
          <van-col span="12" style="padding:0 10px;">
            <van-button class="maskBtns" style=""   @click="timePopup=false,getCurrentDate=getCurrentDatePrev,getEndCurrentDate=getEndCurrentDatePrev">取消</van-button>
          </van-col>
          <van-col span="12" style="padding:0 10px;">
            <van-button  type="primary"  class="maskBtns" @click="getList">确定</van-button>
          </van-col>
        </van-row>
      </van-popup>
      <!--开始时间的弹出层-->
      <van-popup v-model="startPopupShow" class="stimeMask" >
        <van-datetime-picker
          v-model="currentDate"
          type="datetime"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="startTimeFn"
          @cancel="startPopupShow=false"
        />
      </van-popup>
      <!--结束时间的弹出层-->
      <van-popup v-model="endPopupShow" class="stimeMask" >
        <van-datetime-picker
          v-model="endCurrentDate"
          type="datetime"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="endTimeFn"
          @cancel="endPopupShow=false"
        />
      </van-popup>

      <!--商品关键字搜索-->
      <van-popup v-model="goodsShow" @click-overlay="goodsValue=''" class="mask-sousuo" >
        <p style="">搜索商品</p>
        <van-cell-group style="margin:5% 3%">
          <van-field v-model="goodsValue" style="border:1px solid #ddd;border-radius:5px;" placeholder="请输入商品信息" />
        </van-cell-group>
        <van-row>
          <van-col span="12" style="padding:0 10px;">
              <van-button class="maskBtns"  @click="goodsValue='',goodsShow=false">取消</van-button>
          </van-col>
          <van-col span="12" style="padding:0 10px;">
            <van-button class="maskBtns" :disabled="searchStatus" type="primary" @click="onSearh">搜索</van-button>
          </van-col>
        </van-row>
      </van-popup>

      <!--排序方式-->
      <van-popup v-model="sortShow" @click-overlay="sortShow=false,sortRadio=sortRadioNext" class="mask-paixu" >
        <van-radio-group v-model="sortRadio" style="margin-bottom:10px;">
          <van-cell-group >
            <van-cell title="按销售金额" style="text-align: left;" clickable @click="sortRadio = '1'">
              <van-radio name="1" />
            </van-cell>
            <van-cell title="按销售数量" style="text-align: left;" clickable @click="sortRadio = '2'">
              <van-radio name="2" />
            </van-cell>
            <van-cell title="按库存数量" style="text-align: left;" clickable @click="sortRadio = '3'">
              <van-radio name="3" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <!--按钮-->
        <van-row>
          <van-col span="12"  style="padding:0 10px;">
            <van-button  @click="sortShow=false,sortRadio=sortRadioNext" class="maskBtns">取消</van-button>
          </van-col>
          <van-col span="12"  style="padding:0 10px;">
            <van-button  type="primary" @click="getSortFn" class="maskBtns">确定</van-button>
          </van-col>
        </van-row>
      </van-popup>

      <!--显示方式-->
      <van-popup v-model="displayMode" @click-overlay="displayMode=false,displayModeRadio=displayModeRadioNext" class="mask-shows" >

        <van-radio-group v-model="displayModeRadio" style="margin-bottom:10px;">
          <van-cell-group >
            <van-cell title="按店铺显示" style="text-align: left;" clickable @click="displayModeRadio = '1'">
              <van-radio name="1" />
            </van-cell>
            <van-cell title="按商品显示" style="text-align: left;" clickable @click="displayModeRadio = '2'">
              <van-radio name="2" />
            </van-cell>
            <van-cell title="按店铺+商品显示" style="text-align: left;" clickable @click="displayModeRadio = '3'">
              <van-radio name="3" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <!--按钮-->
        <van-row>
          <van-col span="12"  style="padding:0 10px;">
            <van-button  @click="displayMode=false,displayModeRadio=displayModeRadioNext" class="maskBtns">取消</van-button>
          </van-col>
          <van-col span="12"  style="padding:0 10px;">
            <van-button  type="primary" @click="getDisplayModeFn" class="maskBtns">确定</van-button>
          </van-col>
        </van-row>
      </van-popup>

      <!--返回按钮-->
      <backs></backs>

      <!--搜索-->
      <van-button class="crossLevelSupervise-sousuo" @click="goodsShow=true">
        <i class="iconfont icon-fangdajingcopy"></i>
      </van-button>
    </div>
</template>

<script>
  import { mapState } from 'vuex';
  import backs from "@/components/menu/backPrev";
    export default {
        name: "crossLevelSupervise",
        computed: {
          ...mapState({
            memberDetails:"data"
          })
        },
        components: {
          backs
        },
        data(){
          return {
            color:'#0D90EB',
            //过滤弹层
            filterShow:false,

            searchStatus:false,
            //时间弹出层
            timePopup:false,
            startPopupShow:false,//开始时间的弹出层
            minHour: 10,
            maxHour: 20,
            minDate: new Date(2016,1,1),
            maxDate: new Date(2050,12,31),
            currentDate: {},//当前时间
            getCurrentDate:"",
            getCurrentDatePrev:"",//记录上一次的值

            endPopupShow:false,//结束时间的弹出层
            endCurrentDate: {},//本月的最后一天的时间
            getEndCurrentDate:"",
            getEndCurrentDatePrev:"",//记录上一次的值

            //商品关键字过滤
            goodsShow:false,
            goodsValue:"",
            goodsValuePrev:"",

            //排序方式
            sortShow:false,
            sortRadio:"2",
            sortRadioNext:"2",//存入上一次的选项

            //显示方式
            displayMode:false,
            displayModeRadio:"1",
            displayModeRadioNext:"1",//存入上一次的选项

            //滚动加载
            loading: false,
            finished: false,
            offset:30,
            page:1,//当前页
            pageSize:30,//每页显示条数
            goodsDP:[],//店铺商品数据
            goodsImgList:[],//商品图片

            totalSales:0,//销售总数
            totalSalesAmount:0,//销售总金额
            currentStock:0, //当前库存
            noData: 'none'
          }
        },
        methods:{
          backImg (code) {
            // console.log(this.goodsImgList)
            var goods = this.goodsImgList.filter(i => parseInt(i.code) === parseInt(code))
            if (goods.length) {
              console.log(goods[0].images)
              return goods[0].images
            }
            return ''
          },
          //给开始、结束时间赋值
          getNowTime(){
            //获取开始时间
            var myDate = new Date();
            var mytime=myDate.getMonth();
            var y=myDate.getFullYear();

            this.currentDate=new Date(y,mytime,1);

            var y = this.currentDate.getFullYear();
            var m = this.currentDate.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            var d = this.currentDate.getDate();
            d = d < 10 ? ('0' + d) : d;

            this.minDate=new Date(1900,0,1);
            // this.minDate=new Date(y,m-1,d);
            //获取选择的当前时间
            this.getCurrentDate=y + '-' + m + '-' + d+" 00:00:00";
            this.getCurrentDatePrev=y + '-' + m + '-' + d+" 00:00:00";


            //结束时间
            this.endCurrentDate=new Date(y,mytime+1,0);
            var y2 = this.endCurrentDate.getFullYear();
            var m2 = this.endCurrentDate.getMonth() + 1;
            m2 = m2 < 10 ? '0' + m2 : m2;
            //构造一个日期对象：获取当月的最后一天
            var day = new Date(y2,m2,0);
            //获取天数：
            var d2 = day.getDate();
            //获取选择的结束时间
            this.getEndCurrentDate=y2 + '-' + m2 + '-' + d2+" 23:59:59";
            this.getEndCurrentDatePrev=y2 + '-' + m2 + '-' + d2+" 23:59:59";

            this.maxDate=new Date(y2,m2-1,d2,23,59,59);

          },
          //点击开始时间的确定按钮
          startTimeFn(){
            this.startPopupShow=false;//隐藏弹出层
            var y = this.currentDate.getFullYear();
            var m = this.currentDate.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            var d = this.currentDate.getDate();
            d = d < 10 ? ('0' + d) : d;

            var hour = this.currentDate.getHours() < 10 ? "0" + this.currentDate.getHours() : this.currentDate.getHours();
            var minute = this.currentDate.getMinutes() < 10 ? "0" + this.currentDate.getMinutes() : this.currentDate.getMinutes();
            //获取选择的当前时间
            this.getCurrentDate=y + '-' + m + '-' + d+" "+hour+":"+minute+":00";

            // this.getCustomerAccountInfo();
          },
          //点击结束时间的确定按钮
          endTimeFn(){
            this.endPopupShow=false;//隐藏弹出层
            var y = this.endCurrentDate.getFullYear();
            var m = this.endCurrentDate.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            var d = this.endCurrentDate.getDate();
            d = d < 10 ? ('0' + d) : d;
            var hour = this.endCurrentDate.getHours() < 10 ? "0" + this.endCurrentDate.getHours() : this.endCurrentDate.getHours();
            var minute = this.endCurrentDate.getMinutes() < 10 ? "0" + this.endCurrentDate.getMinutes() : this.endCurrentDate.getMinutes();
            //获取选择的时间
            this.getEndCurrentDate=y + '-' + m + '-' + d+" "+hour+":"+minute+":59";


            // this.getCustomerAccountInfo();

          },
          //时间弹层的确定按钮
          getList(){
            this.timePopup=false;

            this.goodsDP=[];
            this.noData = 'none';
            this.page=1;
            this.loading = true;
            this.finished = false;
            this.getAllFn();
          },
            //搜索关键字
            onSearh(){
              this.goodsShow=false;
              this.searchStatus=true;

              this.goodsValuePrev=this.goodsValue;
              this.goodsDP=[];
              this.goodsImgList=[];
              this.noData = 'none';
              this.page=1;
              this.loading = true;
              this.finished = false;
              this.getAllFn();
              // this.goodsValue="";
            },
            //排序的确定按钮
            getSortFn(){
                this.sortShow=false;
                this.sortRadioNext=this.sortRadio;

              this.goodsDP=[];
              this.page=1;
              this.loading = true;
              this.finished = false;
              this.noData = 'none';
              this.getAllFn();
            },
            //显示方式确定按钮
            getDisplayModeFn(){
                this.displayModeRadioNext=this.displayModeRadio;
                this.displayMode=false;

              this.goodsDP=[];
              this.goodsImgList=[];
              this.noData = 'none';
              this.page=1;
              this.loading = true;
              this.finished = false;
              this.getAllFn();
            },
            //获取所有数据
            getAllFn(){
              var $this=this;
              this.$http.item.post('/report/crossLevelSupervise',{
                curPage: $this.page,                           //页数
                pageSize: $this.pageSize,                         // 每页条数
                startTime: $this.getCurrentDate,     //开始时间
                endTime: $this.getEndCurrentDate,       // 结束时间
                keyword: $this.goodsValuePrev,                         // 商品关键字
                order: $this.sortRadio,                           // 排序方式 – 1.按销售金额，2.销售数量(默认)，3.库存数量
                showType: $this.displayModeRadio                         //显示方式 – 1.按店铺显示(默认)，2.按商品code，3.按店铺+商品code 显示

            })
                .then(function (response) {
                  // console.log(response.data.data)
                  var empId = localStorage.getItem('empId')
                  if(empId&&response.data.code){
                    $this.$toast.fail(response.data.message);
                    $this.$router.go(-1)
                    return;
                  }
                  $this.totalSales=response.data.data.xs_num;
                  $this.totalSalesAmount=response.data.data.xs_money;
                  $this.currentStock=response.data.data.kucun;
                  if(response.data.data.xs_num>10000){
                    $this.totalSales=(response.data.data.xs_num/10000).toFixed(2)+"万";
                  }else{
                    $this.totalSales=response.data.data.xs_num;
                  }

                  if(response.data.data.xs_money>10000){
                    $this.totalSalesAmount=(response.data.data.xs_money/10000).toFixed(2)+"万";
                  }else{
                    $this.totalSalesAmount=response.data.data.xs_money;
                  }
                  if(response.data.data.kucun>10000){
                    $this.currentStock=(response.data.data.kucun/10000).toFixed(2)+"万";
                  }else{
                    $this.currentStock=response.data.data.kucun;
                  }

                  $this.page++;
                  if(!response.data.data.info.length){
                    $this.goodsDP="未找到相关数据";
                    $this.loading = false;
                    $this.finished = true;
                  }
                  var goodsCodeList=[];
                  for(var i=0;i<response.data.data.info.length;i++){
                    // $this.goodsDP.push(response.data.data.info[i]);

                    goodsCodeList.push(response.data.data.info[i].code);
                  }
                  // console.log(response.data.data);
                  if(response.data.data.info.length>0){
                    $this.getGoodsFn(goodsCodeList,response.data.data.info,response.data.data.allsize);
                  }

                  $this.searchStatus=false;
                })
                .catch(function (error) {
                  $this.$toast.fail('登陆过期，请重新登陆');
                  console.log(error);
                });
            },
            // 通过商品code获取商品图片等信息
            getGoodsFn(codeList,goods,size){
              var $this=this;
              codeList=codeList.join(",");
              this.$http.item.get('/item/search',{
                params:{
                  // item_codes:["15275809557501413"]
                  item_codes:codeList
                }
              })
                .then(function (response) {
                  // console.log(goods);
                  // console.log(response.data.data.data);
                    for(var f=0;f<goods.length;f++){
                      $this.goodsDP.push(goods[f])
                    }
                    for(var i=0;i<response.data.data.data.length;i++){
                      $this.goodsImgList.push(response.data.data.data[i]);
                      for(var j=0;j<$this.goodsDP.length;j++){
                        if(response.data.data.data[i].code==$this.goodsDP[j].code){
                          $this.goodsDP[j].images=response.data.data.data[i].images;
                          if($this.goodsDP[j].images.length){
                            $this.goodsDP[j].imgStatus=1;
                          }else{
                            $this.goodsDP[j].imgStatus=0;
                          }
                        }
                      }

                    }
                  // console.log($this.goodsDP);
                  $this.loading = false;
                  if ($this.goodsDP.length >= size) {
                    $this.finished = true;
                    $this.noData = 'block';
                  }

                })
                .catch(function (error) {
                  console.log(error);
                });
            }
        },
        mounted(){
          this.getNowTime();
        }
    }
</script>

<style scoped>
  .crossLevelSupervise{
    font-size:14px;
    color:#666;
  }
  /*弹出层的边框*/
  .crossLevelSupervise .van-cell{
    border-bottom:1px solid #e5e5e5;
  }
  .crossLevelSupervise .van-cell:first-child{
    /*border-top:1px solid #e5e5e5;*/
  }
  .crossLevelSupervise [class*=van-hairline]::after{
    border:0;
  }

  .crossLevelSupervise-top{
    position: fixed;
    top:0;
    left:0;
    background: #fff;
    width:100%;
  }
  .crossLevelSupervised-menu{
    width:100%;
    display: flex;
    padding-top:20px;
    padding-bottom:10px;
    border-bottom:1px solid #ddd;
    margin-top:45px;
    background: #fff!important;
    position: fixed;
    top:0;
    left:0;
  }
  .crossLevelSupervise-content{
    margin-top: 111px;
    padding: 10px 5px;
  }
  .crossLevelSupervise-sousuo{
    position: fixed;
    bottom:170px;
    right:10px;
    background:rgba(0,0,0,.5);
    width:55px;
    height:55px;
    color:#fff;
    font-size:12px;
    padding:12px 0;
    border-radius: 8px;
    line-height: initial;
  }
  .moneys-cli{
    color:#01A761;
    font-size:16px;
  }
  .cli-imgs{
    width:60px;height:90px;
  }
  .timeMask{
    width:320px;padding:5px 0;background: #fff!important;border-radius: 5px;
  }
  .maskBtn{
    padding:10px 0;
  }
  .maskBtns{
    width:100%;height:38px;line-height: 38px;
  }
  .stimeMask{
    width:320px;border-radius:5px;
  }
  .mask-sousuo{
    width:320px;padding:10px 0;background: #fff!important;border-radius: 5px;
  }
  .mask-sousuo>p{
    font-size:16px;color:#888
  }
  .mask-paixu{
    width:320px;padding:10px 0;background: #fff!important;border-radius: 5px;
  }
  .mask-shows{
    width:320px;padding:10px 0;background: #fff!important;border-radius: 5px;
  }
  .sTimeMask{
    text-align: left;border-top:1px solid #e5e5e5;
    font-size:12px;
  }

</style>
